<%@page contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>下拉表格示例</title>
		<cw:base />
		<script>
        var fields=['id','name'];
    </script>
	</head>
	<body>
		<li>
			<b> 表格下拉框,也称多栏下拉框，是在列表下拉框的基础上对下拉列表的内容进行表格化扩展而来的一种高级下拉框 </b>
		</li>
		<li>
			<b> 通过内置具有下拉列表行为的表格控件来实现多栏下拉列表，需指定值域和名称域 </b>
		</li>
		<li>
			<b> 以下示例展现了如何设置下拉表格的数据源并且根据条件过滤出数据记录 </b>
		</li>
		<br />
		<cw:form id="form" url="../../../../sample/form/submitFormWithGridSelect.action">
			<li>
				自动联想功能，即输入关键字，能自动下拉列表查询出相应的数据，设置autoComplete="true"，minChars="2"(开始联想的最小字符数)
				<br>
				&nbsp;&nbsp;&nbsp;&nbsp;注意,如果输入框内容为手动输入,而非下拉选择,则提交输入内容,同样适用于可编辑下拉框
				<table>
					<tr>
						<td>
							自动完成框示例(例如输入:li)：
						</td>
						<td>
							<cw:gridSelect property="hello" fields="fields" width="300"
								url="../../../../sample/form/loadGridSelectData.action" title="人员结果列表" emptyText="请输入人名关键字,输入两个字后自动联想"
								displayField="name" valueField="id" pageSize="10" minChars="2" listWidth="410" autoComplete="true">
								<cw:gridSelectColumn width="150" property="id" header="编号" />
								<cw:gridSelectColumn width="220" property="name" header="姓名" />
							</cw:gridSelect>
						</td>
					</tr>
				</table>
				<br />
			</li>
			<li>
				基本下拉表格
				<table>
					<tr>
						<td>
							下拉表格示例(支持回车/下方向键弹出表格)：
						</td>
						<td>
							<!-- 清除文本框并不会去掉表格选择，需要在onclean事件方法中处理 -->
							<cw:gridSelect id="gridSelect" property="people" fields="fields" width="300"
								url="../../../../sample/form/loadGridSelectData.action" emptyText="请输入人名关键字..." displayField="name"
								valueField="id" pageSize="7" listWidth="365" listeners="{'onclean':function(){this.setValue('');}}">
								<cw:gridSelectColumn width="120" property="id" header="编号" />
								<cw:gridSelectColumn width="200" property="name" header="姓名" />
							</cw:gridSelect>
						</td>
					</tr>
				</table>
				<br>
			</li>
			<li>
				手动填充下拉表格框的数据
				<table>
					<tr>
						<td>
							<cw:button text="设置下拉表格数据" onclick="query()"></cw:button>
						</td>
					</tr>
				</table>
			</li>
			<li>
				将下拉表格作为表单元素加载和提交到后台
				<table>
					<tr>
						<td>
							<cw:button text="加载数据" onclick="loadGridSelect()"></cw:button>
						</td>
						<td>
							<cw:formButton actionType="submit" formId="form" />
						</td>
					</tr>
				</table>
			</li>
		</cw:form>
		<script type="text/javascript">
    	function query(){
    			Wonders.form.doQueryGridSelect('gridSelect', 'ai', function(){alert(Ext.getCmp('gridSelect').getValue());}, 1);
    	}
    
			function loadGridSelect(){
			    Wonders.utils.formLoad('form','../../../../sample/form/loadFormWithGridSelect.action',null,null,'加载成功!');
			}
	</script>
	</body>
</html>
